<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="林镭特">
    <title></title>
    <style>
        .box{
            display: flex;
            position: relative;
            height: 30px;
        }
        .star{
            display: flex;
            margin-left: 20px;
        }
        .star div{
            width: 30px;
            height: 30px;
            background: url('images/star.png') center 0/30px auto;
        }
        .star div.on{
            background-position: 0 -44px;
        }
        .result{
            margin-left: 20px;
        }
        .tips{
            position: absolute;
            top: 30px;
            left: 0;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>点击星星评分</span>
        <div class="star">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <span class="result"></span>
        <div class="tips"></div>
    </div>
<script>
    var stars=document.querySelectorAll('.star div')
    var tips=document.querySelector('.tips')
    var result=document.querySelector('.result')
    var megs=[
    "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ]
    function showstar(num) {
        for(var i = 0; i < stars.length; i++){
            stars[i].className=i<num ? 'on':''
        }
    }

    var score=0
    for(var i = 0; i < stars.length; i++){
        stars[i].index=i
        stars[i].onmouseenter=function(){
            showstar(this.index+1);
            tips.style.left = this.offsetLeft + 'px';
            var msg = megs[this.index];
            tips.innerHTML = (this.index+1) + '分 ' + msg.split('|')[0] + '<br>'+ msg.split('|')[1];
        }
        stars[i].onclick = function(){
            score = this.index+1;
            var msg = megs[this.index];
            result.innerHTML = '<strong>'+ (this.index+1) + '分 ' + msg.split('|')[0] + '</strong>'+ msg.split('|')[1];
        }
        stars[i].onmouseleave = function(){
            showstar(score);
            tips.innerHTML = '';
        }
    }
</script>
</body>
</html>